<script setup>
import { useEcharts,echartsObj } from '../composables/useEcharts';
import { onMounted, ref } from 'vue';
import axios from 'axios';
const oneChart = ref(null)
const data = ref({})
const xdata = ref([])
const ydata = ref([])
const getState = async () => {
  const res = await axios.get('/one/data')
  data.value = res.data.chartData.chartData
  xdata.value = data.value.map(item => item.title)
  ydata.value = data.value.map(item => item.num)
}

onMounted(() => {
  getState().then(() => {
    const echartsInstance = useEcharts(oneChart.value)
    echartsInstance.setOption({
      grid:{
        top:"3%",
        left:"1%",
        right:"6%",
        bottom:"3%",
        containLabel: true // 坐标轴刻度标签是否在gridcontain内
      },
      xAxis: {
        type: 'value',
        axisLine:{
          lineStyle:{color:'#fff'}
        }
      },
      yAxis: {
        type: 'category',
        data: xdata.value,
        axisLine:{
          lineStyle:{color:'#fff'}
        }
      },
      series: [
        {
          type: "bar",
          data: ydata.value,
          itemStyle: {
            normal: {
              barBorderRadius: [0,20,20,0], // 柱形图圆角
              color: new echartsObj.graphic.LinearGradient(0, 0, 1, 0, [{ // 渐变色
                offset: 0,
                color: '#005eaa'
              },
              {
                offset: 0.5,
                color: '#339ca8'
              },
              {
                offset: 1,
                color: '#cda819'
              }]
              )
            }
          }
        }
      ]
    })
  })
})

</script>

<template>
  <div>
    <h2>销售总量</h2>
    <div class="chart" ref="oneChart"></div>
  </div>
</template>

<style scoped lang="less">
.chart {
  height: 4.5rem;
}

h2 {
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>
